<template>
  <el-container>
    <!-- 顶部 -->
    <el-header>
      <div class="logo">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <div class="tools">
        <el-dropdown @command="toolsEvent">
          <i class="el-icon-user">
            <span>{{ user.nickname }}</span>
          </i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="tools-userinfo"
              >个人信息</el-dropdown-item
            >
            <el-dropdown-item command="tools-logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 容器 -->
    <el-container>
      <!-- 左侧菜单树 -->
      <el-aside width="200px">
        <el-menu router class="el-menu-vertical-demo">
          <el-submenu
            :index="menu.id+''"
            v-for="menu in user.permissionTreeList"
            :key="menu.id"
          >
            <template slot="title">
              <i :class="menu.icon"></i>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item
              :index="subMenu.uri"
              v-for="subMenu in menu.children"
              :key="subMenu.id"
            >
              <i :class="subMenu.icon"></i>
              <span slot="title">{{ subMenu.name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右侧主体内容 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import userUtils from "@/utils/userUtils";
import { mapState } from "vuex";
import authApi from "@/api/authApi";

export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    // 顶部右侧工具按钮
    toolsEvent(command) {
      if ("tools-logout" == command) {
        this.$confirm("确认退出登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            authApi.login.logout().then((res) => {
              userUtils.clearUserInfo();
              userUtils.clearToken();
              this.$router.push("/");
            });
          })
          .catch(() => {});
      }
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>

<style lang="less">
html,
body,
#app,
.el-container {
  overflow-y: hidden;
  padding: 0px;
  margin: 0px;
  height: 100%;
}
.el-header {
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .logo {
    width: 199px;
    border-right: 1px solid #e6e6e6;
    img {
      width: 145px;
      height: 45px;
      margin-top: 7px;
    }
  }
  .tools {
    cursor: pointer;
    margin-right: 30px;
    .el-dropdown i {
      font-size: 20px;
      span {
        margin-left: 5px;
        font-size: 18px;
      }
    }
  }
}

.el-aside {
  overflow: hidden;
  text-align: center;
  line-height: 200px;
  border-right: 1px solid #e6e6e6;
  .el-menu {
    border: none;
    .el-submenu__title,
    .el-menu-item {
      text-align: left;
    }
  }
}

.el-main {
}

.el-pagination {
  margin-top: 25px;
}
.el-table {
  font-size: 14px;
}
.table-tools{
  margin-bottom: 20px;
}
</style>
